<template>
  <div class="space-detail">

    <!-- 导航 -->
    <van-nav-bar title="盲盒详情" left-text="" class="space-nav" :border="false" :fixed="true" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <!-- 图片 -->
    <div class="space-detail-image topic-detail nav-top">
      <img :src="detail.boxPath" class="img-fluid w-100" style="height:12.5em" alt="">
    </div>

    <!-- container -->
    <div class="space-detail-box pb-4">

      <div class="container pt-3">
        <!-- 标题 start -->
        <div class="row">
          <div class="col d-flex justify-content-start align-items-center">
            <h5 class="m-0">{{detail.boxName}}</h5>
            <!-- 状态 -->
            <div class="topic-detail__status ms-3" :class="$statusFilters.cls(detail.status)">
              {{ $statusFilters.name(detail.status)}}
            </div>
          </div>
        </div>

        <!-- <div class="row my-2">
          <div class="col">{{detail.introduction}}</div>
        </div> -->
        <!-- 标题 end -->

        <!-- 详细 start-->
        <div class="row">
          <div class="col">
            <div class="bgimg-1 rounded p-3">
              <div class="row my-2">
                <div class="col money d-flex align-items-center justify-content-center">
                  <img src="../assets/img/money.png" class="img-fluid" style="height:1.5em" alt="">
                  <div class="ms-2">发行价格：￥{{detail.boxPrice}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 详细 end -->

        <!-- 详细 start-->
        <div class="row my-3">
          <div class="col">
            <div class="bgimg-1 rounded p-3">
              <div class="row my-2">
                <div class="col">
                  {{detail.introduction}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 详细 end -->

        <!-- 详细 start-->
        <div class="row my-3">
          <div class="col">
            <div class="bgimg-1 rounded p-3">
              <div class="row my-2">
                <div class="col-4">
                  发行方
                </div>
                <div class="col-8">
                  {{detail.issuer}}
                </div>
              </div>

              <div class="row my-2">
                <div class="col-4">
                  资产与作者
                </div>
                <div class="col-8">
                  {{detail.assetsAuthor}}
                </div>

              </div>
            </div>
          </div>
        </div>
        <!-- 详细 end -->

        <!-- 详细 start-->
        <div class="row my-3">
          <div class="col">
            <div class="bgimg-1 rounded p-3">
              <div class="row my-2">
                <div class="col">
                  <h3>速览</h3>
                </div>

              </div>
              <div class="row my-2">
                <div class="col">
                  {{detail.quickGlance}}
                </div>
              </div>

              <div class="row my-2">
                <div class="col-6 my-2" v-for="(item,index) in detail.list" :key="index">
                  <img :src="item.cardPath" class="img-fluid w-100" style="height: 6em;" alt="">
                </div>

              </div>
            </div>
          </div>
        </div>
        <!-- 详细 end -->

      </div>
    </div>
    <!-- container end -->
    <div class="bgimg-1 py-2 position-fixed bottom-0 end-0 w-100">
      <div class="container">
        <div class="row">
          <div class="col d-flex justify-content-center align-items-center">
            <button type="button" class="btn btn-primary" @click="onBuyBox">购买盲盒</button>
          </div>
        </div>

      </div>
    </div>

        <!-- 开盲盒弹窗提示 start -->
    <van-popup :show="showBlindBoxPopup" :round="true" closeable close-icon="close" icon-prefix="su-popup-icon" :style="{ paddingTop: '2em',paddingBottom: '2em',width:'80%',backgroundColor:'#020a1e' }" :onClose="closeBlindBoxPopup">
      <div class="text-center my-5">
        <img src="../assets/img/sr.png" alt="">
      </div>
      <div class="text-center">
        恭喜获得{{boxDetail.level}}级卡
      </div>
    </van-popup>
    <!-- 开盲盒弹窗提示 end -->

  </div>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import { apis, fetchPersonalData, postRequest } from '@/common/ts/request'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      show: false,
      showSwapList: false,
      detail: {},
      showBlindBoxPopup: false,
      boxDetail: {},
    })
    const themeVars = {
      cellTextColor: '#a8d0fc',
      cellBackgroundColor: '#020a1e',
      cellValueColor: '#a8d0fc',
      cellVerticalPadding: '2px',
    }
    onMounted(() => {
      init()
    })

    const init = async () => {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
      })
      const { id, type } = route.query
      const { data } = await postRequest(apis.boxInfo, { id: id })
      console.log(data)

      state.detail = data
      Toast.clear()
    }

    const showSwapDetail = () => {
      console.log('showSwapDetail')
      state.showSwapList = true
    }
    const closeSwapList = () => {
      console.log('closeSwapList')
      state.showSwapList = false
    }

    const onClickLeft = () => history.back()

    const onBuyBox = async () => {
      Toast.loading({
        message: '正在处理...',
        forbidClick: true,
      })
      console.log('onBuyBox')
      const { data } = await postRequest(apis.buyBox, {
        id: (state.detail as any).id,
      })

      state.boxDetail = data

      //更新用户数据
      await fetchPersonalData()

      Toast.success('购买成功')

      Toast.clear()

      openBlindBoxPopup();

      console.log(data)
    }

    const openBlindBoxPopup = async () => {
      state.showBlindBoxPopup = true
    }

    const closeBlindBoxPopup = async () => {
      state.showBlindBoxPopup = false
    }

    return {
      ...toRefs(state),
      showSwapDetail,
      themeVars,
      closeSwapList,
      onClickLeft,
      onBuyBox,
      closeBlindBoxPopup,
      openBlindBoxPopup,
    }
  },
}
</script>

<style lang="scss" scoped>
.space-detail {
  position: relative;
  .space-detail-back {
    background: transparent url('../assets/img/sp-back.png') center no-repeat;
    height: 2em;
    width: 2em;
    background-size: 100%;
    position: absolute;
    top: 1em;
    left: 1em;
  }
  .space-detail-status {
    & > div {
      background-color: #164ed2;
      width: 5em;
      border-bottom-right-radius: 0.6em;
    }
  }

  .space-detail-box {
    background: transparent url('../assets/img/sm_sp-bg.jpg') no-repeat;
    background-size: cover;
    padding-bottom: 4em !important;
  }
  .swap-list {
    height: 30em;
    overflow-y: scroll;
  }
}

.topic-detail {
  &__status {
    color: #fff;
    background-color: #5481fe;
    border-radius: 2em;
    padding: 2px 4px;
    font-size: 0.6em;
  }
}
.money {
  color: #f7a46b;
}

.colon {
  display: inline-block;
  margin: 0 0.5em;
}
.block {
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  border-radius: 0.3em;
}
</style>
